<template>
<nav aria-label="Page navigation" id="ccc">
    <ul class="pagination pagination-sm justify-content-end">
       <li class="page-item">
           <a class="page-link" href="#" aria-label="Previous" v-on:click="queryDemand(res.pageNo-1)">
               <span aria-hidden="true">&laquo;</span>
           </a>
       </li>
       
       <li v-if="res.pageNo==1" v-for="index of 4" class="page-item">
           <a class="page-link" href="#" v-on:click="queryDemand(index)" >{{index}}</a>
       </li>
   
    <span v-else-if="res.pageNo+2<=res.totalPage" style="display: flex;">
       <li class="page-item">
           <a class="page-link" href="#" v-on:click="queryDemand(res.pageNo-1)" >{{res.pageNo-1}}
           </a>
       </li>
       <li class="page-item">
           <a class="page-link" href="#" v-on:click="queryDemand(res.pageNo)" >{{res.pageNo}}
           </a>
       </li>
       <li class="page-item">
           <a class="page-link" href="#" v-on:click="queryDemand(res.pageNo+1)" >{{res.pageNo+1}}
           </a>
       </li>
       <li class="page-item">
            <a class="page-link" href="#" v-on:click="queryDemand(res.pageNo+2)" >{{res.pageNo+2}}
            </a>
       </li>
   </span>
   <span v-else style="display: flex;">
   <li  class="page-item">
       <a class="page-link" href="#" v-on:click="queryDemand(res.totalPage-3)" >{{res.totalPage-3}}</a>
   </li>
   <li  class="page-item">
       <a class="page-link" href="#" v-on:click="queryDemand(res.totalPage-2)" >{{res.totalPage-2}}</a>
   </li>
   <li  class="page-item">
       <a class="page-link" href="#" v-on:click="queryDemand(res.totalPage-1)" >{{res.totalPage-1}}</a>
   </li>
   <li  class="page-item">
       <a class="page-link" href="#" v-on:click="queryDemand(res.totalPage)" >{{res.totalPage}}</a>
   </li>
   </span>

   <li>
           <a class="page-link" href="#" aria-label="Next">
               <span aria-hidden="true" v-on:click="queryDemand(res.pageNo+1)">&raquo;</span>
           </a>
       </li>
   
   </ul>
</nav>
</template>
<script type="text/javascript">
   Vue.createApp({
     data(){
        return {
            res:{}
        }
      },
      props:{
        data:{require:false,type:Array,default:''},
      },
      beforeMount() {
        this.res=data
      },
      method:{
        
      }
    }).mounted("#ccc")
</script>